<template>
  <el-card>
    <div class="bigBOx">
      <div class="head">
        <div class="top">订单状态</div>
        <div class="bottom">{{ detail?.orderStatusString }}</div>
      </div>
      <div class="head">
        <div class="top">创建时间</div>
        <div class="bottom">{{ detail?.createTime }}</div>
      </div>
      <div class="head">
        <div class="top">订单号</div>
        <div class="bottom">{{ detail?.orderNo }}</div>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="goodsCoverImg" label="商品图片">
        <template #default="scope">
          <img
            style="width: 200px; height: 200px"
            :src="'http://backend-api-02.newbee.ltd' + scope.row.goodsCoverImg"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="goodsId" label="商品编号" />
      <el-table-column prop="goodsName" label="商品名" />
      <el-table-column prop="goodsCount" label="商品数量" />
      <el-table-column prop="sellingPrice" label="价格" />
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { api } from "../../../api/api";
import { useRoute } from "vue-router";
const route = useRoute();
const detail = ref();
const tableData = ref([]);
onMounted(async () => {
  const res: any = await api.getOrderDetailApi({ id: Number(route.query.id) });
  detail.value = res.data;
  tableData.value = res.data.newBeeMallOrderItemVOS;
});
</script>

<style lang="scss" scoped>
.bigBOx {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  .head {
    width: 32%;
    height: 100px;
    border: 1px solid #eee;
    transition: all 0.3s;
    .top {
      width: 100%;
      height: 40%;
      border-bottom: 1px solid #eee;
      padding: 10px;
    }
    .bottom {
      width: 100%;
      height: 60%;
      padding: 10px;
    }
  }
  .head:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
